<template>
  <d2-container>
    <div class="w-full h-full dashboard-dark" :style="computedStyle">
      <div id="page-screen-index-container" class="w-full h-full" v-loading="!info">
        <div id="page-screen-index" class="page-screen-index flex flex-col h-full" v-if="info">
          <div :style="isScreen ? 'height: 330px' : 'height: 534px;'">
            <el-row :gutter="20" class="h-full">
              <el-col :span="16" class="relative flex h-full">
                <div class="w-full h-full relative">
                  <div class="dashboard-main-visual">
                    <div class="visual-header">
                      <h2 class="visual-title">数字低碳管理平台</h2>
                      <p class="visual-subtitle">提供准确、高效的能效分析优化管理一站式服务</p>
                    </div>
                    <div class="visual-content">
                      <div class="visual-stats">
                        <div class="stat-item">
                          <div class="stat-icon">
                            <i class="el-icon-office-building"></i>
                          </div>
                          <div class="stat-info">
                            <div class="stat-number">{{ info.device.equi_total || 3 }}</div>
                            <div class="stat-label">项目总数</div>
                          </div>
                        </div>
                        <div class="stat-item">
                          <div class="stat-icon">
                            <i class="el-icon-data-analysis"></i>
                          </div>
                          <div class="stat-info">
                            <div class="stat-number">{{ info.device.meter_total || 156 }}</div>
                            <div class="stat-label">仪表总数</div>
                          </div>
                        </div>
                        <div class="stat-item">
                          <div class="stat-icon">
                            <i class="el-icon-warning"></i>
                          </div>
                          <div class="stat-info">
                            <div class="stat-number">{{ meterWarning.data.length || 0 }}</div>
                            <div class="stat-label">报警记录</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="8" class="relative flex flex-col h-full">
                <div class="common-card dark-card">
                  <div class="flex items-center pt-2">
                    <img class="common-card-icon" src="../../../assets/screen/icon@2x(7).png" />
                    <span class="common-card-title">设备状态</span>
                  </div>
                  <div class="flex px-2">
                    <div class="flex-1 text-center transparent-card-v3 dark-transparent-card" :class="isScreen ? 'py-2' : 'py-4'">
                      <div class="stat-highlight" :style="isScreen ? 'font-size:20px;' : 'font-size:30px;'">{{info.device.equi_online}}/{{info.device.equi_total}}</div>
                      <div class="text-white" :class="isScreen ? 'text-xs' : 'text-sm'">采集网关</div>
                    </div>
                    <div class="flex-1 text-center transparent-card-v3 dark-transparent-card ml-2" :class="isScreen ? 'py-2' : 'py-4'">
                      <div class="stat-highlight" :style="isScreen ? 'font-size:20px;' : 'font-size:30px;'">{{info.device.meter_online}}/{{info.device.meter_total}}</div>
                      <div class="text-white" :class="isScreen ? 'text-xs' : 'text-sm'">设备总数</div>
                    </div>
                  </div>
                </div>

                <div class="common-card dark-card mt-3 relative">
                  <div class="flex items-center" :class="isScreen ? 'pt-3' : 'pt-2 pr-2'">
                    <img class="common-card-icon" src="../../../assets/screen/icon@2x(1).png" />
                    <span class="common-card-title">用电分析</span>
                    <span style="flex:1;"></span>
                    <el-radio-group v-model="item_type" size="mini" class="dark-radio-group" :style="isScreen ? 'transform:scale3d(.7,.7,.7);white-space: nowrap;' : ''">
                      <el-radio-button label="1">年</el-radio-button>
                      <el-radio-button label="2">月</el-radio-button>
                      <el-radio-button label="3">日</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div id="yong_dian_fen_xi_chart" :style="isScreen ? 'height:155px;' : 'height:250px;'"></div>
                </div>
              </el-col>
            </el-row>
          </div>

          <div class="flex-1 h-0" :class="isScreen ? 'mt-1' : 'mt-4'">
            <el-row :gutter="20" class="h-full">
              <el-col :span="16" class="relative flex h-full">
                <div class="common-card dark-card w-full">
                  <div class="flex px-6 flex-col py-8 grid grid-rows-4 grid-cols-2 gap-2">
                    <div class="flex-1 p-1 transparent-card-v4 dark-transparent-card flex items-center" v-for="(i, index) in info.eneusages" :key="i.usage_name">
                      <img :src="require(`../../../assets/screen/icon-${i.usage_name}.png`)" class="w-8 h-8 mx-2 my-1" />
                      <div class="flex-1 text-sm text-white">
                        <div class="flex-1">
                          {{ i.usage_name }}
                          <template v-if="i.usage_unit">({{ i.usage_unit }})</template>
                        </div>
                        <div class="flex">
                          <span class="flex-2">本日</span>
                          <span class="stat-highlight flex-3 font-bold">{{ i.usage_day }}</span>
                          <span class="flex-2">本月</span>
                          <span class="stat-highlight flex-3 font-bold">{{ i.usage_mon }}</span>
                          <span class="flex-2">本年</span>
                          <span class="stat-highlight flex-3 font-bold">{{ i.usage_year }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="8" class="relative flex h-full">
                <dv-border-box-8 :dur="6" :class="isScreen ? 'p-2' : 'p-4 pb-5'" class="dark-border-box">
                  <dv-decoration-7 :style="isScreen ? 'height:20px;transform:scale3d(.8,.8,.8)' : 'height:30px;'">
                    <div class="theme-front-color px-2">告警信息</div>
                  </dv-decoration-7>
                  <div :class="isScreen ? 'mt-2' : 'mt-4'">
                    <dv-scroll-board :config="meterWarning" :style="isScreen ? 'height:160px' : 'height:200px'" class="dark-scroll-board" />
                  </div>
                </dv-border-box-8>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>

      <el-dialog
        title="温湿度"
        width="600px"
        border
        :visible.sync="wsModal"
        :append-to-body="true">
        <el-table :data="wsList">
          <el-table-column label="仪表编号" prop="code" align="center" width="100"/>
          <el-table-column label="仪表名称" prop="name" align="center" width="100"/>
          <el-table-column label="最新温度(℃)" prop="wendu" align="center" width="100"/>
          <el-table-column label="最新湿度(%)" prop="shidu" align="center" width="100"/>
        </el-table>
      </el-dialog>
    </div>
  </d2-container>
</template>

<script>
import * as echarts from 'echarts'
import Charts from '@jiaminghi/charts'
import dataV from '@jiaminghi/data-view'
import Vue from 'vue'
Vue.use(dataV)

let pieChart = null

export default {
  data() {
    return {
      pageZoomRate: 1,
      info: null,
      meterWarning: {
        header: ['回路名称', '报警详情', '报警等级', '异常发生时间'],
        columnWidth: [100, 80, 80, 150],
        data: []
      },
      item_type: 1,
      pieDataIndex: 0,
      hjjc: [
        {
          name: '温度',
          value: 30,
          unit: '℃'
        },
        {
          name: '湿度',
          value: 57,
          unit: '%'
        },
        {
          name: 'PM2.5',
          value: 34.3,
          unit: 'μg/m³'
        },
        {
          name: '余压',
          value: 52,
          unit: 'Pa'
        }
      ],
      wsModal: false,
      wsList: [
        {
          code: 'T201037',
          name: '温湿度',
          wendu: 20.5,
          shidu: 57.5
        }
      ]
    }
  },
  computed: {
    computedStyle() {
      return this.$route.name === 'screenV2' ? {
        'background-color': '#233a6a',
        'padding': '5px'
      } : {}
    },
    isScreen() {
      return this.$route.name === 'screenV2'
    },
  },
  created() {
    window.onresize = () => {
      this.domResize()
    }
    this.domResize()
    this.getInfo()
  },
  watch: {
    item_type() {
      this.drawPie()
    },
  },
  methods: {
    getInfo() {
      this.$api.getHomeIndexInfo({
        'projectId': this.$util.cookies.get("cuuren_projectId"),
        "customerId":this.$util.cookies.get('customer_id')
      }).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.info = res.data
          this.meterWarning.data = this.info.alarms.map(item => {
            return [
              // item.alarm_pname,
              item.alarm_lname,
              item.alarm_notes,
              item.alarm_leval_desc,
              // item.alarm_event_desc,
              item.alarm_event_time
            ]
          })
          this.drawPie()
          this.drawBar()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    drawBar() {
      const eng = this.info.eng
      this.$nextTick(() => {
        const chart = echarts.init(document.querySelector('#energy_compare'))
        chart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              label: {
                show: true
              }
            }
          },
          calculable: true,
          legend: {
            data: ['昨日碳排放', '碳排放'],
            itemGap: 5,
            textStyle: {
              color: '#fff'
            }
          },
          grid: {
            top: this.isScreen ? '20%' : '15%',
            left: '2%',
            right: '5%',
            bottom: '5%',
            containLabel: true
          },
          axisLabel: {
            color: '#fff'
          },
          xAxis: [
            {
              type: 'category',
              data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: 'kgCO2e',
              nameTextStyle: {
                color: '#fff'
              }
            }
          ],
          series: [
            {
              name: '昨日碳排放',
              type: 'bar',
              data: eng.yesday.map(Number)
            },
            {
              name: '碳排放',
              type: 'bar',
              data: eng.today.map(Number)
            }
          ]
        })
      })
    },
    drawPie() {
      const data = this.info.items[this.item_type].item_detail
      this.$nextTick(() => {
        if (pieChart) {
          pieChart.clear()
        }
        pieChart = echarts.init(document.querySelector('#yong_dian_fen_xi_chart'))
        pieChart.setOption({
          tooltip: {
            trigger: 'item',
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: this.isScreen ? '5%' : '8%',
            top: '15%',
            itemWidth: 14,
            itemHeight: 8,
            textStyle: {
              color: '#fff',
              fontSize: this.isScreen ? 10 : 12
            },
            formatter: function(name) {
              return name + '：' + data.find(i => i.name === name).yongliang
            }
          },
          series: [
            {
              type: 'pie',
              data: data.map(i => {
                return {
                  name: i.name,
                  value: Number(i.yongliang)
                }
              }),
              itemStyle: {
                borderRadius: 5,
                borderColor: 'transparent',
                borderWidth: 2
              },
              center: ['30%', '50%'],
              radius: this.isScreen ? ['50%', '66%'] : ['40%', '66%'],
              insideLabel: {
                show: true,
              },
              outsideLabel: {
                show: false,
                labelLineEndLength: 3,
                fontSize: this.isScreen ? 12 : 15
              },
              label: {
                position: 'center',
                show: true,
                fontSize: this.isScreen ? 13 : 16,
                color: '#fff',
                formatter: function () {
                  return data.map(i => Number(i.yongliang)).reduce((x, y) => x + y) + 'kW·h'
                }
              },
            }
          ]
        })

        // 监听 mouseover 事件
        pieChart.on('mouseover', (params) => {
          if (params.componentType === 'series') {
            this.pieDataIndex = params.dataIndex
          }
        })
      })
    },
    domResize() {
      this.$nextTick(() => {
        const dom = document.querySelector('#page-screen-index-container')
        const x = dom.offsetWidth / 1800
        // console.log(dom.offsetWidth, dom.offsetHeight)
        if (x * 950 < dom.offsetHeight) {
          this.pageZoomRate = x
          return
        }
        this.pageZoomRate = dom.offsetHeight / 950
      })
    },
  }
}
</script>


<style lang="scss">
  .page-screen-index {
    // aspect-ratio: 1400 / 950;

    .dv-scroll-board {

      .header {
        font-size: 14px;
      }

      .row-item {
        font-size: 12px;
      }
    }

   .common-card-image {
     background-image: url(../../../assets/screen/box-bg@2x-2.png);
     background-size: 100% 100%;
     padding: 20px;
   }

   .common-card {
     background-image: url(../../../assets/screen/panel-bg@2x.png);
     background-size: 100% 100%;
     padding-bottom: 20px;

     &-icon {
       width: 70px;
       height: 62px;
       margin-left: -5px;
     }

     &-title {
       color: #AADDFF;
       font-size: 21px;
       margin-left: -10px;
     }
   }

   .transparent-card {
     background-image: url(../../../assets/screen/icon-333.png);
     background-size: 100% 100%;
   }

   .transparent-card-v2 {
     background-image: url(../../../assets/screen/box-bg@2x.png);
     background-size: 100% 100%;
   }

   .transparent-card-v3 {
     background-image: url(../../../assets/screen/box-bg@2x-1.png);
     background-size: 100% 100%;
   }

   .transparent-card-v4 {
     background-image: url(../../../assets/screen/box-bg@2x-2.png);
     background-size: 100% 100%;
   }
  }

  @media screen and (max-width: 900px) {
    .common-card {
      padding-bottom: 10px !important;

      &-icon {
        width: 35px !important;
        height: 31px !important;
        margin-left: 0 !important;
      }

      &-title {
        font-size: 14px !important;
        margin-left: -5px !important;
      }
    }

    .dv-scroll-board {

      .header {
        font-size: 10px !important;

        .header-item {
          padding: 2px !important;
          height: 25px !important;
          line-height: 25px !important;
        }
      }

      .row-item {
        font-size: 10px !important;

        .ceil {
          padding: 2px !important;
        }
      }
    }
  }
</style>

<style lang="scss" scoped>
// 深色主题首页样式
.dashboard-dark {
  background: linear-gradient(135deg, #0e1d34 0%, #1c2e47 100%);
  
  .dashboard-main-visual {
    background: linear-gradient(135deg, rgba(28, 46, 71, 0.95) 0%, rgba(42, 57, 80, 0.95) 100%);
    border: 1px solid rgba(95, 110, 138, 0.3);
    border-radius: 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('../../../assets/screen/WechatIMG88.jpg') center/cover;
      opacity: 0.1;
      z-index: 0;
    }
    
    .visual-header {
      text-align: center;
      z-index: 1;
      margin-bottom: 40px;
      
      .visual-title {
        font-size: 3rem;
        font-weight: 700;
        color: #ffffff;
        margin: 0 0 16px 0;
        letter-spacing: 3px;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
      }
      
      .visual-subtitle {
        font-size: 1.2rem;
        color: rgba(255, 255, 255, 0.8);
        margin: 0;
        letter-spacing: 1px;
      }
    }
    
    .visual-content {
      z-index: 1;
      
      .visual-stats {
        display: flex;
        gap: 40px;
        
        .stat-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 20px;
          background: rgba(42, 57, 80, 0.6);
          border: 1px solid rgba(95, 110, 138, 0.3);
          border-radius: 12px;
          backdrop-filter: blur(5px);
          transition: all 0.3s ease;
          
          &:hover {
            transform: translateY(-5px);
            background: rgba(58, 123, 153, 0.3);
            border-color: #70afce;
            box-shadow: 0 8px 25px rgba(58, 123, 153, 0.2);
          }
          
          .stat-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #3a7b99 0%, #70afce 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 16px;
            
            i {
              font-size: 28px;
              color: #ffffff;
            }
          }
          
          .stat-info {
            text-align: center;
            
            .stat-number {
              font-size: 2rem;
              font-weight: 700;
              color: #a5def1;
              margin-bottom: 8px;
            }
            
            .stat-label {
              font-size: 0.9rem;
              color: rgba(255, 255, 255, 0.8);
              letter-spacing: 1px;
            }
          }
        }
      }
    }
  }
  
  .dark-card {
    background: rgba(42, 57, 80, 0.95) !important;
    border: 1px solid rgba(95, 110, 138, 0.3) !important;
    backdrop-filter: blur(10px);
    
    .common-card-title {
      color: #ffffff !important;
      font-weight: 600;
    }
  }
  
  .dark-transparent-card {
    background: rgba(44, 61, 85, 0.8) !important;
    border: 1px solid rgba(95, 110, 138, 0.3) !important;
    border-radius: 8px;
    backdrop-filter: blur(5px);
    
    &:hover {
      background: rgba(58, 123, 153, 0.3) !important;
      border-color: #70afce !important;
    }
  }
  
  .stat-highlight {
    color: #a5def1 !important;
    text-shadow: 0 0 10px rgba(165, 222, 241, 0.3);
  }
  
  .dark-radio-group {
    .el-radio-button__inner {
      background-color: rgba(44, 61, 85, 0.8) !important;
      border-color: rgba(95, 110, 138, 0.5) !important;
      color: #88a7b1 !important;
      
      &:hover {
        color: #a5def1 !important;
        border-color: #70afce !important;
      }
    }
    
    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      background-color: #3a7b99 !important;
      border-color: #3a7b99 !important;
      color: #ffffff !important;
      box-shadow: none !important;
    }
  }
  
  .dark-border-box {
    background: rgba(42, 57, 80, 0.95) !important;
    border: 1px solid rgba(95, 110, 138, 0.3) !important;
    border-radius: 8px;
    backdrop-filter: blur(10px);
  }
  
  .dark-scroll-board {
    background: transparent !important;
    
    .dv-scroll-board-text {
      color: #ffffff !important;
    }
  }
  
  // Element UI 深色主题覆盖
  .el-card {
    background: rgba(42, 57, 80, 0.95) !important;
    border: 1px solid rgba(95, 110, 138, 0.3) !important;
    color: #ffffff !important;
    
    .el-card__header {
      background: rgba(28, 46, 71, 0.8) !important;
      border-bottom: 1px solid rgba(95, 110, 138, 0.3) !important;
      color: #ffffff !important;
    }
  }
  
  .el-loading-mask {
    background-color: rgba(28, 46, 71, 0.8) !important;
  }
  
  .el-loading-spinner {
    .path {
      stroke: #a5def1 !important;
    }
    
    .el-loading-text {
      color: #ffffff !important;
    }
  }
}

// 通用深色主题样式
.theme-dark {
  .dashboard-dark {
    background: linear-gradient(135deg, #0e1d34 0%, #1c2e47 100%);
  }
}
</style>

